<template>
  <div class="doc-contain">
    <h1>Button 按钮</h1>
    <div class="preview-contain">
      <h2>基础用法</h2>
      <preview :component="demo" componentName="button" demoName="demo"/>
      <h2>加载状态</h2>
      <preview :component="loadingDemo" componentName="button" demoName="loadingDemo"/>
      <document :body="propBody" title="属性" type="prop"/>
    </div>
  </div>
</template>

<script lang="ts" setup>
import preview from '/@/components/preview.vue'
import document from '/@/components/document.vue'
import demo from './demo.vue'
import loadingDemo from './loadingDemo.vue'

const propBody = [
  ['size', '尺寸', 'string', '否', ['small', 'large', 'middle'], 'middle'],
  ['type', '类型', 'string', '否', ['primary', 'info', 'success', 'warning', 'danger', 'default'], 'default'],
  ['loading', '加载状态', 'boolean', '否', '—', 'false'],
  ['round', '是否圆角', 'boolean', '否', '—', 'false'],
]
</script>


<style scoped>
.doc-contain {
  text-align: left;
  width: 100%;
}
</style>